<template>
  <div class="mall-order-cell" @click="onClick">
    <div class="order-info">
      <span>订单号：{{order.orderNo}}</span>
      <span class="order-status">{{ order.statusCn }}</span>
    </div>
    <div class="product-list">
      <ProductCell type="tiny" v-for="(prod) in order.products" :product="prod" :key="prod.id"></ProductCell>
    </div>
    <div class="order-price-section">
      合计:<span class="price"><small>￥</small>{{ order.total }}</span>
    </div>
    <div class="order-actions">
      <van-button class="vant-red-grd-btn order-btn" size="mini" round @click="onClick">详情</van-button>
    </div>
  </div>
</template>

<script>
import ProductCell from './ProductCell'

export default {
  name: 'OrderCell',
  components: {
    ProductCell
  },
  props: {
    order: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    onClick () {
      this.$emit('click', this.order)
      this.$router.push({
        path: '/order/detail/',
        query: {
          id: this.order.orderId
        }
      })
    }
  }
}
</script>

<style lang="less">
  .mall-order-cell {
    background: #fff;
    margin: 0 10px;
    border-radius: 5px;
    padding-bottom: 10px;

    +.mall-order-cell {
      margin-top: 10px;
    }

    .order-info {
      font-size: 12px;
      color: #333;
      margin: 0 10px;
      line-height: 3em;
      display: flex;
      justify-content: space-between;

      .order-status {
        color: red;
      }
    }

    .order-price-section {
      margin-top: 10px;
      padding: 0 10px;
      text-align: right;

      .price {
        color: red;
      }
    }

    .order-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      padding: 0 10px;

      .order-btn {
        padding: 0 10px;
      }
    }
  }
</style>
